<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有聚有爱</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery.js"></script>
    <script src="./bootstrap.min.js"></script>
    <style>  
    .mynav {
	background: rgb(94, 153, 247);
	height: 60px;
	font-size: 16px;

}

    .mynav .navbar-nav li a {
	line-height: 20px;

	color: black;

	padding-right: 20px;
	padding-top: 30px;
	margin-top: -10px;
}

    .mynav .navbar-nav li a:hover{
	color: white;
}
    .mynav .navbar-nav li a.active{
	color: white;
	border-bottom: 2px solid white;
} 
    #lk_nav .nav {
	position: relative;
	background: rgb(94, 153, 247);
	
}

    #lk_nav .nav li {
	margin-right: 50px;
}

    @media all and (min-width: 908px) {
	#lk_nav .nav {
		left: 20%;
	}
}
#avatarPreview {  
    display: none;  
}

    </style>  
</head>  
  
<body background="https://i0.hdslb.com/bfs/new_dyn/5474cad03da2ae1a0f230ebbac22b617290750052.jpg@1256w_708h_!web-article-pic.avif"  
    style="background-repeat: no-repeat; background-attachment: fixed; background-size: 100%;">  
    <div>  
        <nav class="mynav navbar navbar-default navbar-static-top">  
            <div class="container-fluid">  
  
                <div class="navbar-header">  
                    <a class="navbar-brand" href="登录.html">  
                        有聚有爱  
                    </a>  
                </div>  
  
                <div class="collapse navbar-collapse" id="lk_nav">  
                    <ul class="nav navbar-nav">  
                        <li>  
                            <a href="首页.html">首页</a>  
                        </li>  
  
                        <li>  
                            <a href="动态.html">动态</a>  
                            <!--音频，图片，效果-->  
                        </li>  
                        <li>  
                            <a href="好友.html">好友</a>  
                            <!--包括音乐+视频-->  
                        </li>  
                        <li>  
                            <a href="" class="active">个人中心</a>  
                            <!--音频，图片，效果-->  
                        </li>  
                        <li>  
                            <a href="关于我们.html">关于我们</a>  
                            <!--音频，图片，效果-->  
                        </li>  
  
                    </ul>  
                </div>  
                <!-- /.navbar-collapse -->  
            </div>  
            <!-- /.container-fluid -->  
        </nav>  
    </div> 
    <div class="container">  
        <div class="row">  
            <div class="col-md-offset-3 col-md-6">  
                <h2>个人信息</h2>  
                <form id="profileForm" enctype="multipart/form-data">  
                    <div class="form-group">  
                        <label for="avatar">头像</label>  
                        <input type="file" class="form-control" id="avatar" accept="image/*">  
                        <img id="avatarPreview" src="" alt="头像预览" class="img-thumbnail" style="max-width: 150px; margin-top: 10px;">  
                    </div>  
                    <div class="form-group">  
                        <label for="nickname">昵称</label>  
                        <input type="text" class="form-control" id="nickname" placeholder="请输入昵称">  
                    </div>  
                    <div class="form-group">  
                        <label for="birthdate">出生日期</label>  
                        <input type="date" class="form-control" id="birthdate">  
                    </div>  
                    <div class="form-group">  
                        <label for="gender">性别</label>  
                        <label class="radio-inline">  
                            <input type="radio" name="gender" id="male" value="male"> 男  
                        </label>  
                        <label class="radio-inline">  
                            <input type="radio" name="gender" id="female" value="female"> 女  
                        </label>  
                    </div>  
                    <div class="form-group">  
                        <label for="bio">个性签名</label>  
                        <textarea class="form-control" id="bio" rows="3" placeholder="请输入个性签名"></textarea>  
                    </div>  
                    <button type="submit" class="btn btn-primary">保存</button>  
                </form>  
            </div>  
        </div>  
    </div>  
    <script src="./jquery.js"></script>
    <script src="./bootstrap.min.js"></script>
    <script>$(document).ready(function() {  
        // 头像预览功能  
        $('#avatar').change(function(event) {  
            var input = event.target;  
            if (input.files && input.files[0]) {  
                var reader = new FileReader();  
                reader.onload = function(e) {  
                    $('#avatarPreview').attr('src', e.target.result).show();  
                };  
                reader.readAsDataURL(input.files[0]);  
            } else {  
                $('#avatarPreview').hide();  
            }  
        });  
      
        // 表单提交处理  
        $('#profileForm').submit(function(event) {  
            event.preventDefault();  
      
            var formData = new FormData(this);  
      
            // 这里可以用 AJAX 提交数据到服务器  
            // 例如：  
            /*  
            $.ajax({  
                url: '/your-server-endpoint',  
                type: 'POST',  
                data: formData,  
                processData: false,  
                contentType: false,  
                success: function(response) {  
                    alert('个人信息已保存');  
                },  
                error: function(error) {  
                    alert('保存失败');  
                }  
            });  
            */  
      
            // 仅在此示例中打印出表单数据  
            console.log(formData);  
      
            // 重置表单（可选）  
            // $('#profileForm')[0].reset();  
            // $('#avatarPreview').hide();  
        });  
    });</script>
</body>  
  
</html>


 